/**
 *李萌创建于2016-02-24
 */

/***************************全局变量命名开始********************************/
//文本域
var g_textArea;

//碎片文本容器
var g_divStr;

//开始元素
var startObj;

//开始元素索引
var startIndex;

//结束元素
var endObj;

//结束元素索引
var endIndex;

var banKuanIdIndex = 0;

//是否已经开始，如果为false就调整为开始，如果为true就作出动作
var startOk = false;
/***************************全局变量命名结束********************************/

$(function() {
	$("#piecesBtn").bind("click", piecesText);
	
	$("#modulEquallyBtn").bind("click", modulEqually);
	
	$("#piecesSelBtn").bind("click", piecesSelText);

	$("#modulSurplusBtn").bind("click", modulSurplus);

	$("#switchBtn").bind("click", toggDiv);

	$("#saveButton").bind("click", save);

	g_textArea = $("#textArea");
	g_divStr = $("#divStr");
});

/**
 *碎片化内容 
 */
function piecesText() {

	var oldText =  g_textArea.val();
	oldText = oldText.replace(/\n/g,"\\n")
	var suiPianText = "";
	
	//开始碎片化字符串为单个字符，并用span包装
	for(var i = 0; i < oldText.length; i ++){
		suiPianText +=  "<div onClick='locking(this)' class='textDiv' name='character'>" + oldText[i] + "</div>"

		if("\\" == oldText[i -1 ] && "n" == oldText[i]){
			suiPianText +=  "<br>"
		}

	}
	
	g_divStr.html(suiPianText);
	//隐藏文本框并显示板块信息
	showBanKuai();
	
}

/**
 *锁定元素 ，一个锁定过程需要两次点击事件
 * @param {Object} obj
 */
function locking(obj){
	$(obj).prop("class", "textDivSelected");

	var divStrDoms = g_divStr.children();
	var objIndex;
	for(var i = 0; i < divStrDoms.length; i++){
	
		if(obj == divStrDoms[i]){
			objIndex = i;
			break;
		}
		
	}

	if(! startOk){//如果为false就说明未开始，就把obj赋值给startObj，然后将状态调整为已开始
		
		startObj = obj;
		startIndex = objIndex;
		startOk = true;
		$("#tishi").html("请选择结束位置")
		
	}else{//如果为true就说明已经开始，就把obj赋值给endObj，，然后板块化锁定的范围文本，然后将状态调整为未开始，以便于开启新的锁定
	
		endObj = obj;
		endIndex = objIndex;
		modulText();
		startOk = false;
	}
}


/**
 *锁定完毕后开始版块化代码
 */
function modulText() {
	
	if (endIndex < startIndex) {//如果结束索引小于开始索引则需要将开始元素和结束元素交换

		var temp = startObj;
		startObj = endObj;
		endObj = temp;
		

	}
	//版块化的文本
	var banKuaiText = $(startObj).html();

	if (startObj == endObj) {//如果是同一个元素

        //且已经被板块化过
		if("character" != $(startObj).attr("name")){

			$("#tishi").html("请选择开始位置");
			$(startObj).prop("class", "bigDiv");
			return;

		}else{
			//如果未被板块化过
			banKuanIdIndex ++;
			banKuaiText = $(startObj).html();
		}


	} else {

		//当前版块标识
		banKuanIdIndex ++;

		//如果版块信息表格中存在本字符或版块的信息，将其tr移除
		var tr = $("tr[id='" + $(startObj).attr("name") + "']")
		if(tr){
			tr.remove();
		}
		//下一元素
		var nextObj = $(startObj).next();

		//如果下一个元素不是结束元素就继续寻找
		while (endObj != nextObj[0]) {

			banKuaiText += nextObj.html();
			//如果版块信息表格中存在本字符或版块的信息，将其tr移除
			var tr = $("tr[id='" + nextObj.attr("name") + "']")
			if(tr){
				tr.remove();
			}

			var oldObj = nextObj;
			//再次寻找下一元素
			nextObj = nextObj.next();
			//确定完下一元素后将本元素移除
			oldObj.remove();
		}
		banKuaiText += $(endObj).html();

		//移除最后一个元素及其对应的版块信息
		var tr = $("tr[id='" + $(endObj).attr("name") + "']")
		if(tr){
			tr.remove();
		}
		$(endObj).remove();
	}
	
	$(startObj).html(banKuaiText);
	$(startObj).prop("class", "bigDiv");
	$(startObj).attr("name", banKuanIdIndex);
	
	//然后添加相应的版块内容
	var infoStr = "<tr class=\"form-group\" id=\""+banKuanIdIndex+"\">" +
		"<td><input  type=\"text\" class=\"form-control\" readonly=\"readonly\" name=\"banKuaiName\" value=\""+ banKuanIdIndex +"\"></td>"+
		"<td><label>固定<input type=\"radio\" name=\""+banKuanIdIndex+"\"  value=\"static\"></label>" +
		"&nbsp;&nbsp;<label>动态<input type=\"radio\" checked=\"checked\" name=\""+banKuanIdIndex+"\"  value=\"active\"></label></td>"+
		"<td><input type=\"text\"class=\"form-control\"  name=\"guiZeText\" value=\""+ banKuaiText +"\"></td>"+
		"<td><input type=\"text\"class=\"form-control\"  name=\"banKuaiText\" value=\""+ banKuaiText +"\"></td>"+
	"</tr>"
	$("#banKuaiInfo").append(infoStr)
	
	$("#tishi").html("请选择开始位置");
	
}

/**
 *版块化相同字符 
 */
function modulEqually(){
	if(startOk){
		alert("您还没有选择结束位置！")
		return;
	}
	var resourceText =  $(startObj).html();
	var resourceName = $(startObj).attr("name");
	var divStr = g_divStr.html();
	
	//将被版块化后的块进拆分然后形成要被替换的标准
	var regeStr = ""
	
	for(var i = 0; i < resourceText.length; i ++){
		regeStr += "<div onclick=\"locking(this)\" class=\"textDiv\" name=\"character\">" + resourceText[i] + "<\/div>"
		if("\\" == resourceText[i -1 ] && "n" == resourceText[i]){
			regeStr += "<br>"
		}
	}
	//为了美观，如果标准中的最后是<br>，那么需要保留
	if(regeStr.length -4 == regeStr.lastIndexOf("<br>")){
		console.log("---------------")
		regeStr = regeStr.substring(0,regeStr.length -4 );
	}
	//将旧的的符合条件的版块合并形成新的dom串
	 
	while(-1 != divStr.indexOf(regeStr)){

		divStr = divStr.replace(regeStr, "<div onclick=\"locking(this)\" class=\"bigDiv\" name=\""+resourceName+"\">"+resourceText+ "<\/div>")
	}

	//将新的串再次置入碎片文本容器中
	g_divStr.html(divStr);
//	alert($(startObj).attr("name"));
	
}

/**
 * 碎片化选中版块
 */
function piecesSelText(){

	if(! startOk){
		alert("请您先选中一个版块");
		return;
	}
	//碎片化版块的范围（选中版块还是全部同名版块）
	var range = $("input[name='suiPian']:checked").val();
	var sourceText = $(startObj).html();
	//版块名称
	var banKuaiName = $(startObj).attr("name")
	
	
	//将字一个字符仍然置入到startObj中;
	$(startObj).html(sourceText[0]);
	$(startObj).attr("class", "textDiv");

	//当前节点变量
	var current = $(startObj);
	var newStr = ""

	//遍历后形成新型的串
	for(var i = 0; i < sourceText.length; i ++){
		newStr += ("<div onclick=\"locking(this)\" class=\"textDiv\" name=\"character\">"+ sourceText[i] + "</div>");
		if("\\" == sourceText[i -1 ] && "n" == sourceText[i]){
			newStr += "<br>"
		}
	}

	//添加到当前节点后面并将当前节点删除
	current.after(newStr);
	current.remove();
	//碎片后选中的后，如果是需要碎片所有同名版块
	if('byName' == range){
		var banKuais = g_divStr.find("div[name=" + banKuaiName + "]");
		
		for(var i = 0; i < banKuais.length; i ++){
		
			current = $(banKuais[i]);

			newStr = ""
			//遍历形成新的串
			for(var j = 0; j < sourceText.length; j ++){
				newStr += "<div onclick=\"locking(this)\" class=\"textDiv\" name=\"character\">"+ sourceText[j] + "</div>";
				if("\\" == sourceText[j -1 ] && "n" == sourceText[j]){
					newStr += "<br>"
				}
			}

			current.after(newStr);
			current.remove()
		}


	}
	//检查是否需要删除板块信息
	var banKuais = g_divStr.find("div[name=" + banKuaiName + "]");
	if(0 == banKuais.length){
		//如果已经名称为当前版块名的版块，就需要将其信息删除
		var tr = $("tr[id='" + banKuaiName + "']")
		if(tr){
			tr.remove();
		}
	}
	//由于选择字符或板块时不会选中br会导致原有的br保留，
	// 而在碎片化时遇到\n又会再次生成br，因此需要将重复的br清除

	g_divStr.html(g_divStr.html().replace(/(<br>){1,}/g, "<br>"))

	startOk = false;
	$("#tishi").html("请选择开始位置")
}

/**
 *切换文本区域与版块信息区 
 */
function toggDiv() {
	$("#banKuaiInfo").toggle();
	$("#areaDiv").toggle();
}
/**
 * 隐藏文本域
 */
function showBanKuai(){
	$("#banKuaiInfo").show();
	$("#areaDiv").hide();
}

/**
 * 板块化剩余字符
 */
function modulSurplus(){
	var chars = g_divStr.children();

	//临时开头字符对象
	var currenFirObj = $(chars[0]);
	//剩余版块的信息
	var newkanKuaiArr = new Array();
	//遍历全部版块
	for(var i = 0; i < chars.length; i ++){
		if('character' != $(chars[i]).attr("name")){

			//如果当前字符板块化后的即（非碎片化的字符）就将临时开头字符向后推一个
			currenFirObj = $(chars[i+1]);

		}else{


			if(currenFirObj[0] == chars[i]){//如果对象是当前开头对象，需要更改其name并生成板块信息(注意两个如果是jquer对象)

				banKuanIdIndex ++;//更新版块id索引变量

				currenFirObj.attr("name", banKuanIdIndex);	//改变当前开头对象name属性
				currenFirObj.prop("class", "bigDiv");	//改变当前开头对象name属性

				//注意，由于无法确定本版块一完成，因此先空置版块值
				var infoStr = "<tr class=\"form-group\" id=\""+banKuanIdIndex+"\">" +
					"<td><input  type=\"text\" class=\"form-control\" name=\"banKuaiName\" value=\""+ banKuanIdIndex +"\"></td>"+
					"<td><label>固定<input type=\"radio\"  checked=\"checked\" name=\""+banKuanIdIndex+"\"  value=\"static\" ></label>" +
					"&nbsp;&nbsp;<label>动态<input type=\"radio\" name=\""+banKuanIdIndex+"\"  value=\"active\"></label></td>"+
					"<td><input type=\"text\"class=\"form-control\"  name=\"guiZeText\" value=\"\"></td>"+
					"<td><input type=\"text\"class=\"form-control\"  name=\"banKuaiText\" value=\"\"></td>"+
					"</tr>"

				$("#banKuaiInfo").append(infoStr)
				newkanKuaiArr[newkanKuaiArr.length] = banKuanIdIndex;
			}else{
				//如果不是当前开头对象,需要将字符其添加到临时开头对象中去
				currenFirObj.append($(chars[i]).html());
				//则需要将其移除
				$(chars[i]).remove();
			}
		}
	}
	//由于生成版块信息时是置空的，因此我们需要将其
	for(var i = 0 ; i < newkanKuaiArr.length; i++){
		//获取版块对应的行并以此获取版块值文本域
		var tr = $("#banKuaiInfo").find("tr[id='"+ newkanKuaiArr[i] +"']");
		var banKuaiInput = tr.find("input[name='banKuaiText']");

		//获取版块文本
		var banKuaiText = g_divStr.find("div[name='"+newkanKuaiArr[i]+"']").html();

		//将版块文本置入版块值文本域中
		banKuaiInput.val(banKuaiText)
	}

}





